<template>
  <view>
    <view class="company">
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img src="" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img src="" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
      <view class="company-item">
        <!-- 左边图片块 -->
        <view class="company-left-item">
          <img src="" alt="">
          <view class="location">
            <uni-icons type="location-filled"></uni-icons>
            <text>22.68km</text>
          </view>
        </view>
        <!-- 右边文字块 -->
        <view class="company-right-item">
          <b class="title">湖南金管家家政服务有限公司</b>
          <text class="wenzi">您的笑容（满意），我们的追求</text>
          <view class="item-jobs">
            <view class="job active">协会成员</view>
            <view class="job active">服务好</view>
            <view class="job active">环境优美</view>
          </view>
          <text class="wenzi">湖南省长沙市天心区暮云工业园开服曼城住宅...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "company-item",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  // 公司信息
  .company {
    // margin-top: 220rpx;
    padding: 10rpx;
    background-color: #fff;

    .company-item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 10rpx;
      border-bottom: 1rpx solid #f2f0f0;

      .company-left-item {
        font-size: 24rpx;

        img {
          height: 172rpx;
          width: 160rpx;
          background-color: pink;
        }
      }

      .company-right-item {
        height: 209rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 28rpx;

        }

        .item-jobs {
          display: flex;
          background-color: #fff;

          .job {
            height: 40rpx;
            border: 1px solid #979191;
            color: #979191;
            line-height: 40rpx;
            text-align: center;
            border-radius: 28rpx;
            font-size: 20rpx;
            padding: 0 20rpx;
            margin: 10rpx;
          }

          .active {
            border: 1px solid #3f51b5;
            color: #3f51b5;
          }

        }

        .wenzi {
          font-size: 24rpx;
          color: #979191;
        }
      }

    }
  }
</style>
